<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <header th:replace="header::html"></header>
</head>

<body class="">
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">用户管理</a>
        <a>
            <cite>用户列表</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>

<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so" id="contentSearchAdd">

            <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
            <button class="layui-btn"  lay-submit="" lay-filter="sreach" permission="sys:user:query"><i class="layui-icon">&#xe615;</i></button>
            <a class="layui-btn" onclick="x_admin_show('新增用户','/user/add')" permission="sys:user:add"><i class="layui-icon"></i>新增用户</a>

            <!--<input class="layui-input"  autocomplete="off" placeholder="开始日" name="start" id="start">
            <input class="layui-input"  autocomplete="off" placeholder="截止日" name="end" id="end">-->
            <!--<input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">-->
            <!--<button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>-->
            <!--<a class="layui-btn" onclick="x_admin_show('新增用户','/user/add')"><i class="layui-icon"></i>新增用户</a>-->
        </form>

    </div>

    <!--<xblock>
       &lt;!&ndash; <button class="layui-btn layui-btn-danger" onclick="gPaper.fnBatchDel()"><i class="layui-icon"></i>批量删除</button>&ndash;&gt;
        <form class="layui-form layui-col-md12 x-so">
            <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
            <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </xblock>-->

    <table class="layui-hide" id="table" lay-filter="member"></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit" permission="sys:user:edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" permission="sys:user:del">删除</a>
    </script>
</div>

<script>



    layui.use('table', function(){
        var table = layui.table,
            form = layui.form;
        table.render({
            elem: '#table'
            ,url: '/user/list' //数据接口
            ,page: true //开启分页
            ,response: {
                countName: 'count', //规定数据总数的字段名称，默认：count
                dataName: 'datas' //规定数据列表的字段名称，默认：data
            }
            ,cols: [
                [ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID',width:60,  align:'center'}
                ,{field: 'username', title: '用户名'}
                ,{field: 'telephone', title: '手机'}
                ,{field: 'status', title: '状态', width:120,templet:function(d){
                    return  d.status == '1' ? "启动":"禁用";
                }},
                ,{field: 'birthday', title: '生日'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]
            ]
        });

        //监听工具条
        table.on('tool(member)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){

                    $.ajax({
                        url:"/user/delete",
                        type:"GET",
                        data:{id:data.id},
                        dataType:'json',
                        success:function(result){
                            layer.alert("删除成功", {icon: 1},function (index1) {
                                layer.close(index1);
                                x_admin_father_reload();
                            });
                        },
                    });

                });
            } else if(obj.event === 'edit'){
                x_admin_show('编辑用户信息','/user/edit/?id='+data.id);
            }
        });

        //搜索
        form.on('submit(sreach)', function(data){
            var username = data.field.username;
            table.render({
                elem: '#table'
                ,url: '/user/findUserByFuzzyUserName' //数据接口
                ,page: true //开启分页
                ,where:{
                    "username":username
                }
                ,response: {

                    countName: 'count', //规定数据总数的字段名称，默认：count
                    dataName: 'datas' //规定数据列表的字段名称，默认：data
                }
                ,cols: [
                    [ //表头
                        {type: 'checkbox', fixed: 'left'}
                        ,{field: 'id', title: 'ID',width:60,  align:'center'}
                        ,{field: 'username', title: '用户名'}
                        ,{field: 'telephone', title: '手机'}
                        ,{field: 'status', title: '状态', width:120,templet:function(d){
                            return  d.type == '1' ? "启动":"禁用";
                        }}
                        ,{field: 'birthday', title: '生日'}
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                    ]
                ]
            });
            return false;
        });
    });
</script>
</body>
</html>